<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main"></div>

    <script>
        /**
         * documentfragment(文档片段)被定义为轻量级文档，没有对应的表示
         * 也不再文档树中，不会被浏览器渲染
         * 如果文档中的一个节点被添加到文档片段，那么这个节点不在dom树上了，不会被渲染
         * 可以使用appendchild()或insertbefore()方法将文档片段的内容添加到文档中
         * 
         * 使用document.createDocumentFragment()创建
         * 
         * documentfragment从Node类型中继承了所有文档类型可执行DOM操作的方法
        */

        // 给div加三个节点，浏览器要重新渲染三次，避免多次渲染，使用文档片段创建新节点，然后一次性的添加到div中

        const fragment = document.createDocumentFragment()
        const main = document.getElementById('main')

        for (let i = 0; i < 3; ++i) { 
            let div = document.createElement('div')
            div.innerText = `div${i}`
            fragment.appendChild(div)
        }
        
        main.appendChild(fragment)
    </script>
</body>
</html>